{% extends 'frame/base.html' %}
{% load staticfiles %}
{% block title_block %}
	查看消息
{% endblock %}
{% block mystyle_css %}
	<style type="text/css">
	.todo-list > li p {
    width: 100%;
    padding: 15px 0 10px 35px;
	}

	.fancy-radio {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 15px;
    margin-right: 15px;
	}

	.fancy-radio input[type="radio"] + span {
    display: inline-block;
    vertical-align: middle;
	}
	</style>
{% endblock %}
{% block body_block %}
<div class="main">
	<!-- MAIN CONTENT -->
	<div class="main-content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-8">
					<div class="panel">
						<div class="panel-heading" style="padding-bottom: 0;">
							<div class="right">
								<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
							</div>
							<div class="custom-tabs-line tabs-line-bottom left-aligned">
								<ul class="nav" role="tablist">
									<li class="active" id="inbox_zebra_tips" title="PC端双击可全选消息"><a href="#tab-bottom-left1" role="tab" data-toggle="tab" id="inbox_tab" allchecked="False">收件箱{% ifnotequal new_msg_num 0 %}<span class="badge bg-danger">{{new_msg_num}}</span>{% endifnotequal %}</a></li>
									<li id="outbox_zebra_tips" title="PC端双击可全选消息"><a href="#tab-bottom-left2" role="tab" data-toggle="tab" id="outbox_tab" allchecked="False">发件箱</a></li>
									<li><a href="#tab-bottom-left3" role="tab" data-toggle="tab">新消息</span></a></li>	
								</ul>
							</div>
						</div>
						<div class="tab-content">
							<div class="tab-pane fade in active" id="tab-bottom-left1" style="padding-top: 0;">
								<div class="panel-body">									
									<ul class="list-unstyled todo-list">
									{% for mail in inbox_list %}
										{% getdottype mail.priority as dottype %}	
										<li {% if mail.read %} class="completed" {% endif%} id="{{mail.id}}">
											<label class="control-inline fancy-checkbox">
												<input type="checkbox" name="inboxcheckbox" value="{{mail.id}}" class="inbox_all_checked"><span></span>
											</label>
											<p {% if mail.star %} class="alert alert-success alert-dismissible" {% endif%}>
												<strong class="notification-item"><span class="dot bg-{{dottype}}"></span>{{mail.title |slice:"50" }}</strong>
												<span class="short-description" >{{mail.text}}</span>
												<span class="date">From: {{mail.inbox_author}}</span><br>
												<span class="date">{{mail.created_time|date:"Y年m月d日 H:i:s"}}</span>
											</p>
										</li>
									{% endfor %}																						
									</ul>
								</div>
								<div class="panel-footer" style="border: 0;">
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;"  class="starmessagesajax" name="starmessages_inbox"><i class="lnr lnr-star"></i>星标</h5>
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;"  class="readmessagesajax" name="readmessages_inbox"><i class="lnr lnr-eye"></i>已读</h5>
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;float: right;"  class="topmessagesajax" name="topmessages_inbox"><i class="lnr lnr-arrow-up"></i>置顶</h5>
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;float: right;"  class="deletemessagesajax" name="deletemessages_inbox"><i class="lnr lnr-trash"></i>删除</h5>
								</div>
							</div>
							<div class="tab-pane fade" id="tab-bottom-left2" style="padding-top: 0;">
								<div class="panel-body">
									<ul class="list-unstyled todo-list">
									{% for mail in outbox_list %}
										{% getdottype mail.priority as dottype %}	
										<li {% if mail.read %} class="completed" {% endif%}>
											<label class="control-inline fancy-checkbox">
												<input type="checkbox" name="outboxcheckbox" value="{{mail.id}}" class="outbox_all_checked"><span></span>
											</label>
											<p {% if mail.star %} class="alert alert-success alert-dismissible" {% endif%}>
												<strong class="notification-item"><span class="dot bg-{{dottype}}"></span>{{mail.title | slice:"50"}}</strong>
												<span class="short-description">{{mail.text}}</span>
												<span class="date">
													To: {{mail.outbox_receiver}}<br>
												</span>
												<span class="date">{{mail.created_time|date:"Y年m月d日 H:i:s"}}</span>
											</p>
										</li>
									{% endfor %}																						
									</ul>
								</div>
								<div class="panel-footer" style="border: 0;">
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;"  class="starmessagesajax" name="starmessages_outbox"><i class="lnr lnr-star"></i>星标</h5>
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;"  class="readmessagesajax" name="readmessages_outbox"><i class="lnr lnr-eye"></i>已读</h5>
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;float: right;"  class="topmessagesajax" name="topmessages_outbox"><i class="lnr lnr-arrow-up"></i>置顶</h5>
									<h5 style="display:inline-block; margin-right: 5px; cursor:pointer;float: right;"  class="deletemessagesajax" name="deletemessages_outbox"><i class="lnr lnr-trash"></i>删除</h5>
								</div>
							</div>
							<div class="tab-pane fade" id="tab-bottom-left3" style="padding-top: 0;">
								<div class="panel-body">
									<input type="text" class="form-control" placeholder="主题" name="messagestitle" id="messagestitle"><br>
									<input type="text" class="form-control" placeholder="收件人（如:user@joygames.cc普通用户只允许单发信息）" name="messagesreciver" id="messagesreciver"><br>                                   
                                    <label class="fancy-radio">
										<input name="priority" id="info" type="radio" value="3">
										<span><i></i>信息</span>
									</label>
                                    <label class="fancy-radio">
										<input name="priority" id="warning" type="radio" value="2">
										<span><i></i>提醒</span>
									</label>
									<label class="fancy-radio">
										<input name="priority" id="danger" type="radio" value="1">
										<span><i></i>警告</span>
									</label>
									<textarea class="form-control" placeholder="内容" rows="4" name="messagestext" id="messagestext"></textarea><br>
								</div>
								<div class="panel-footer" style="border: 0;">
									<div class="text-center">
										<div class="btn btn-default" id="sendmessagesajax" >发送</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END MAIN CONTENT -->
{% endblock %}
{% block script %}
<script>
	$('#inbox_tab').dblclick( function() {
		if($('#inbox_tab').attr("allchecked") == 'False'){		
				$(".inbox_all_checked").prop("checked", true);;
		 		$(".inbox_all_checked").parents('li').addClass('completed');
		 		$("#inbox_tab").attr("allchecked","True");
		 		return;
		}

		if($('#inbox_tab').attr("allchecked") == 'True'){		
				$(".inbox_all_checked").prop("checked", false);;
		 		$(".inbox_all_checked").parents('li').removeClass('completed');
		 		$("#inbox_tab").attr("allchecked","False");
		 		return;
		}

  	});

	$('#outbox_tab').dblclick( function() {
		if($('#outbox_tab').attr("allchecked") == 'False'){		
				$(".outbox_all_checked").prop("checked", true);;
		 		$(".outbox_all_checked").parents('li').addClass('completed');
		 		$("#outbox_tab").attr("allchecked","True");
		 		return;
		}

		if($('#outbox_tab').attr("allchecked") == 'True'){		
				$(".outbox_all_checked").prop("checked", false);;
		 		$(".outbox_all_checked").parents('li').removeClass('completed');
		 		$("#outbox_tab").attr("allchecked","False");
		 		return;
		}

  	});

	$(document).ready(function() {
	    new $.Zebra_Tooltips($('#inbox_zebra_tips'), {
    		'color': '#3c763d',
    		'background_color': '#dff0d8',
    		'border_color': '#d6e9c6',
    		'opacity': 0.8,
	        'max_width':    300
	    });
	    new $.Zebra_Tooltips($('#outbox_zebra_tips'), {
    		'color': '#3c763d',
    		'background_color': '#dff0d8',
    		'border_color': '#d6e9c6',
    		'opacity': 0.8,
	        'max_width':    300
	    });
	});
</script>
{% endblock %}

